<template>
  <div class="oe-student-management" v-loading="loading">
    <top-tip :batchTitle="batchTitle"></top-tip>
    <div class="oe-manage-content">
      <div class="oe-manage-content__search">
        <span class="oe-search-label">姓名/学号：</span>
        <span class="oe-search-input">
          <a-input v-model="name" placeholder="请输入姓名/学号" @keyup.13="getStudentList"></a-input>
        </span>
        <a-button type="primary" @click.stop="searchList(1)">查询</a-button>
        <a-button type="primary" @click.stop="publicCard()">发布准考证</a-button>
      </div>

      <div class="oe-manage-content__table">
        <a-table
          :columns="columns"
          :dataSource="dataList"
          :rowSelection="rowSelection"
          :pagination="pagination"
          @change="onTableChange"
        >
          <span slot="action" slot-scope="record, index">
            <a-tooltip placement="bottom" title="查看">
              <span @click="lookStuTickets(record, index)" class="action-icon">
                <i class="iconfont icon-chakan" style="cursor:pointer;"></i>
              </span>
            </a-tooltip>
          </span>
        </a-table>
      </div>
    </div>
    <a-modal title="发布准考证" class="oe-student" :visible="cancelCard" width="800px" :closable="false">
      <div class="oe-select">
        <span class="oe-manage-select">
          <h3>温馨提示：</h3>
          <div>1、到发布时间后，学生就可以看到准考证并可以下载，导出等</div>
          <div>2、考生须知将会在准考证上展示，发布后修改考生须知，需学生重新打印准考证，否则考生须知将不统一</div>
          <div>3、勾选邮件通知学生后，到发布时间时会给学生发送一封邮件通知学生打印准考证</div>
          <!-- <div>3、系统会监听学生查看，打印，导出准考证情况</div> -->
        </span>
      </div>
      <div class="oe-list-line">
        <span class="oe-title-text">发布时间：</span>
        <span class="oe-set-push__time">
          <a-date-picker
            @change="onPushChange"
            placeholder="请选择时间"
            :disabled="noPublic"
            v-model="ScorePublishTime"
            :show-time="{ defaultValue: $moment('00:00:00', 'HH:mm:ss') }"
            format="YYYY-MM-DD HH:mm"
          />
        </span>
        <span class="oe-set-push__radio" style="margin-left: 15px">
            <a-checkbox value="sendEmail" v-model="sendEmail" :disabled="noPublic">邮件通知学生</a-checkbox>
          </span>
        <span class="oe-set-push__radio" style="margin-left: 15px">
          <a-checkbox value="noPublic" v-model="noPublic"  @change="noPub">不发布准考证</a-checkbox>
        </span>
      </div>
      <div class="oe-list-line">
        <span class="oe-title-text">考试须知：</span>
        <span class="oe-set-push__time">
          <a-textarea
            style="width: 100%;"
            v-model="stuText"
            placeholder="请输入考生须知"
            :auto-size="{ minRows: 6, maxRows: 1000 }"
            maxlength="500"
          />
          <div class="word-num" style="float: right;">{{stuText.length}}/500</div>
        </span>
      </div>
      <template slot="footer">
        <a-button type="primary" @click="saveCard()" style="margin-top: 16px">确定</a-button>
        <a-button @click.stop="cancelCard = false">取消</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import topTip from '@/components/top-tip/index.vue';
export default {
  name: 'studentManage',
  components: {
    topTip
  },
  data() {
    return {
      // 搜索的name
      name: '',
      cancelCard: false,
      // 分页配置
      pagination: {
        pageSizeOptions: ['10', '20', '50', '100', '1000'],
        showSizeChanger: true,
        showTotal(total) {
          return `共 ${total} 条`;
        },
        onShowSizeChange: (current, pageSize) => {
          this.pagination.current = current;
          this.pagination.pageSize = pageSize;
        },
        onChange: (current, pageSize) => {
          this.pagination.current = current;
          this.pagination.pageSize = pageSize;
        },
        buildOptionText(props) {
          return props.value + '条/页';
        },
        current: 1,
        pageSize: 10,
        total: 0
      },
      // 表标题
      columns: [
        {
          title: '序号',
          dataIndex: 'number',
          width: '5%',
          key: 'number'
        },
        {
          title: '姓名',
          dataIndex: 'DisplayName',
          width: '8%',
          key: 'DisplayName',
          sorter: true
        },
        {
          title: '学号',
          dataIndex: 'UserNo',
          width: '10%',
          key: 'UserNo',
          sorter: true
        },
        {
          title: '院校',
          dataIndex: 'SubName',
          width: '10%',
          key: 'SubName',
          sorter: true
        },
        {
          title: '专业',
          dataIndex: 'MajorName',
          width: '8%',
          key: 'MajorName',
          sorter: true
        },
        {
          title: '年级',
          dataIndex: 'GradeName',
          width: '8%',
          key: 'GradeName',
          sorter: true
        },
        {
          title: '班级',
          dataIndex: 'ClassName',
          width: '8%',
          key: 'ClassName',
          sorter: true
        },
        {
          title: '操作',
          key: 'action',
          width: '8%',
          scopedSlots: { customRender: 'action' },
          align: 'center'
        }
      ],
      // 数据列表
      dataList: [],
      ScorePublishTime: null,
      noPublic: true,
      sendEmail: false,
      stuText: '',
      batchTitle: ''
    };
  },
  props: {
    batchid: {
      type: String,
      default: ''
    },
    examType: {
      type: Number,
      default: 0
    }
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.getStudentList();
      vm.getExamList();
    });
  },
  methods: {
    getExamList() {
      this.loading = true;
      this.$http
        .post('/api/design/workexam/getExamList', {
          batchId: this.batchid
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code == 1) {
            this.batchTitle = rst.batchTitle;
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    // 查询
    searchList() {
      this.getStudentList();
    },
    // 点击table排序
    onTableChange(pagenation, filter, sort) {
      let sortOrder = '';
      if (sort.order) {
        if (sort.order == 'ascend') {
          sortOrder = sort.columnKey;
        } else if (sort.order == 'descend') {
          sortOrder = '-' + sort.columnKey;
        } else {
          sortOrder = '';
        }
      }
      this.getStudentList(pagenation.current, pagenation.pageSize, sortOrder);
    },
    // 点击table排序
    onModalChange(pagenation, filter, sort) {
      let sortOrder = '';
      if (sort.order) {
        if (sort.order == 'ascend') {
          sortOrder = sort.columnKey;
        } else if (sort.order == 'descend') {
          sortOrder = '-' + sort.columnKey;
        } else {
          sortOrder = '';
        }
      }
      this.getImportStudentList(pagenation.current, pagenation.pageSize, sortOrder);
    },
    //查看学生准考证
    lookStuTickets(record, index) {
      this.$router.push({
        name: 'stuTickets',
        params: {
          batchid: this.batchid,
          examType: this.examType,
          num: record.number - 1
        }
      });
    },
    noPub() {
      this.sendEmail = false;
    },
    // 获取学生列表
    getStudentList(page, pageSize, sort) {
      this.loading = true;
      this.$http
        .post('/api/design/student/getStuListByBatchId', {
          batchId: this.batchid,
          examType: this.examType,
          key: this.name,
          sort: sort || '',
          page: page || 1,
          pageSize: pageSize || 10
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code === 1) {
            this.dataList = [];
            this.pagination.current = rst.pagination.pageIndex;
            this.pagination.pageSize = rst.pagination.pageSize;
            this.pagination.total = rst.pagination.totalCount;
            if (rst.list.length) {
              rst.list.forEach((item, index) => {
                let number = (rst.pagination.pageIndex - 1) * rst.pagination.pageSize + index + 1;
                let IsRepair = item.IsRepair ? '是' : '否';
                let State = item.State === 1 ? '已提交未批阅' : item.State === 2 ? '已提交已批阅' : '未提交';
                this.dataList.push({
                  ...item,
                  number: number,
                  IsRepair,
                  State
                });
              });
            }
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    publicCard() {
      this.loading = true;
      this.ScorePublishTime = null;
      this.$http
        .post('/api/design/student/getTickets', {
          batchId: this.batchid
        })
        .then((rst) => {
          this.loading = false;
          let text = this;
          if (rst.code > 0) {
            this.cancelCard = true;
            this.stuText = rst.info.instructions;
            if (rst.info.TicketTime) {
              this.noPublic = false;
              this.sendEmail = rst.info.SendEmail;
              this.ScorePublishTime = this.$moment(rst.info.TicketTime);
            }
          } else {
            text.$message.error(rst.msg);
          }
        });
    },
    saveCard() {
      this.loading = true;
      this.$http
        .post('/api/design/student/publicTickets', {
          batchId: this.batchid,
          instructions: this.stuText,
          time: this.noPublic ? '' : this.$moment(this.ScorePublishTime).format('YYYY-MM-DD HH:mm:ss'),
          noPublic: this.noPublic ? 1 : 0,
          sendEmail: this.sendEmail ? 1 : 0
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code > 0) {
            this.cancelCard = false;
            this.$message.success(rst.msg);
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    onPushChange(val) {}
  }
};
</script>
